import React from 'react'
import './SearchProducts.css';

const products = [
    {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
    {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
    {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
    {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
    {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
    {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
]

function CategoryItem(props) {
    return (
        <div className='category-item'>
            <h3>{props.category}</h3>
        </div>
    )
}

function ProductItem(props) {
    return (
        <div className='product-item'>
            <span className={'product-name '+(!props.stocked?'product-stocked':'')}>{props.name}</span>
            <span className='product-price'>{props.price}</span>
        </div>
    )
}

function FilteredTable(props) {
    let rows = [];
    let lastCategory = null;
    props.list.forEach((item,index)=>{
        if(!item.name.toLowerCase().includes(props.searchText) || (props.isStockOnly&&!item.stocked)){
            return;
        }
        if(item.category!==lastCategory){
            rows.push(<CategoryItem category={item.category} key={item.category}/>)
        }
        rows.push(<ProductItem name={item.name} price={item.price} stocked={item.stocked} key={item.name}/>)
        lastCategory = item.category;
    });

    return rows;
}

class SearchArea extends React.Component {

    onInputing(e){
        this.props.onInputing(e.target.value);
    }

    onChangeCheckbox(e){
        this.props.onChangeCheckbox(e.target.checked);
    }

    render() {
        return (
            <div className='searchTitle'>
                <input className='productInput' type='text' value={this.props.searchText} onChange={this.onInputing.bind(this)}/>
                <label htmlFor='stock'>
                    <input id='stock' type='checkbox' checked={this.props.isStockOnly} onChange={this.onChangeCheckbox.bind(this)}/>Only show products in
                    stock
                </label>
            </div>
        )
    }
}

class SearchProduct extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            searchText:'',
            isStockOnly:false,
        }
        this.onInputSearchText = this.onInputSearchText.bind(this)
        this.onChangeStock = this.onChangeStock.bind(this)
    }

    onInputSearchText(val){
        console.log('Searching:',val)
        this.setState({
            searchText:val
        })
    }

    onChangeStock(val){
        console.log('isStockOnly:',val)
        this.setState({
            isStockOnly:val
        })
    }

    render(){
        return(
            <div className='product-box'>
                <SearchArea  onInputing={this.onInputSearchText} onChangeCheckbox={this.onChangeStock}/>
                <FilteredTable searchText={this.state.searchText} isStockOnly={this.state.isStockOnly} list={products}/>
            </div>
        )
    }
}
export default SearchProduct;